<template>
    <div class="filter-usage-demo">
        <h2>高级筛选组件 - 完整使用示例</h2>

        <!-- 1. 基础用法 -->
        <div class="demo-section">
            <h3>1. 基础用法</h3>
            <AdvancedFilter :fields="basicFields" @query="handleBasicQuery" />
        </div>

        <!-- 2. 各类输入组件示例 -->
        <div class="demo-section">
            <h3>2. 各类输入组件示例</h3>
            <AdvancedFilter :fields="allTypesFields" :columns="2" @query="handleTypeQuery" />
        </div>

        <!-- 3. 下拉框各种配置 -->
        <div class="demo-section">
            <h3>3. 下拉框各种配置</h3>
            <AdvancedFilter :fields="selectTypeFields" :columns="2" @query="handleSelectQuery" />
        </div>

        <!-- 4. 高级选项示例 -->
        <div class="demo-section">
            <h3>4. 高级选项示例</h3>
            <AdvancedFilter :fields="advancedFields" @query="handleAdvancedQuery" />
        </div>

        <!-- 5. 带默认值和加载状态 -->
        <div class="demo-section">
            <h3>5. 带默认值和加载状态</h3>
            <AdvancedFilter :fields="defaultValueFields" :default-values="defaultFilters" :loading="loading"
                @query="handleDefaultQuery" @reset="handleDefaultReset" />
            <el-button style="margin-top: 10px;" @click="toggleLoading">
                {{ loading ? '关闭加载' : '开启加载' }}
            </el-button>
        </div>

        <!-- 6. 事件监听示例 -->
        <div class="demo-section">
            <h3>6. 事件监听示例</h3>
            <AdvancedFilter :fields="eventFields" @query="handleEventQuery" @reset="handleEventReset"
                @change="handleFieldChange" />
            <div class="event-log">
                <h4>事件日志:</h4>
                <ul>
                    <li v-for="(log, index) in eventLogs" :key="index" :class="{ 'latest': index === 0 }">
                        {{ log }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import AdvancedFilter from '@/components/commons/advancedFilter/index.vue';

// 1. 基础用法配置
const basicFields = [
    {
        key: 'name',
        label: '名称',
        type: 'input' as const,
        placeholder: '请输入名称'
    },
    {
        key: 'status',
        label: '状态',
        type: 'select' as const,
        options: [
            { label: '全部', value: '' },
            { label: '启用', value: 1 },
            { label: '禁用', value: 0 }
        ]
    },
    {
        key: 'createTime',
        label: '创建时间',
        type: 'dateRange' as const
    }
];

const handleBasicQuery = (values: Record<string, any>) => {
    console.log('基础查询条件:', values);
};

// 2. 各类输入组件配置
const allTypesFields = [
    {
        key: 'username',
        label: '用户名',
        type: 'input' as const,
        maxlength: 20,
        showWordLimit: true
    },
    {
        key: 'gender',
        label: '性别',
        type: 'select' as const,
        options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' },
            { label: '未知', value: 'unknown' }
        ]
    },
    {
        key: 'birthday',
        label: '出生日期',
        type: 'date' as const,
        format: 'YYYY年MM月DD日',
        valueFormat: 'YYYY-MM-DD'
    },
    {
        key: 'age',
        label: '年龄',
        type: 'number' as const,
        min: 0,
        max: 120,
        step: 1
    },
    {
        key: 'salary',
        label: '薪资',
        type: 'number' as const,
        min: 0,
        step: 1000,
        precision: 0
    },
    {
        key: 'isVip',
        label: '是否VIP',
        type: 'switch' as const,
        activeText: '是',
        inactiveText: '否'
    },
    {
        key: 'agree',
        label: '同意协议',
        type: 'checkbox' as const,
        checkboxLabel: '我已阅读并同意用户协议'
    },
    {
        key: 'workDate',
        label: '工作日期',
        type: 'dateRange' as const,
        format: 'YYYY-MM-DD'
    }
];

const handleTypeQuery = (values: Record<string, any>) => {
    console.log('类型查询条件:', values);
};

// 3. 下拉框各种配置
// 先定义 handleRemoteSearch 函数
const handleRemoteSearch = (query: string) => {
    console.log('远程搜索:', query);
    // 实际项目中这里会调用API获取数据
};

// 再定义 selectTypeFields
const selectTypeFields = [
    // 普通下拉框
    {
        key: 'normalSelect',
        label: '普通下拉框',
        type: 'select' as const,
        options: [
            { label: '选项1', value: 1 },
            { label: '选项2', value: 2 },
            { label: '选项3', value: 3, disabled: true }
        ]
    },
    // 可搜索下拉框
    {
        key: 'searchableSelect',
        label: '可搜索下拉框',
        type: 'select' as const,
        filterable: true,
        options: [
            { label: '苹果', value: 'apple' },
            { label: '香蕉', value: 'banana' },
            { label: '橙子', value: 'orange' },
            { label: '西瓜', value: 'watermelon' },
            { label: '草莓', value: 'strawberry' }
        ]
    },
    // 可输入下拉框（允许创建）
    {
        key: 'creatableSelect',
        label: '可输入下拉框',
        type: 'select' as const,
        filterable: true,
        allowCreate: true,
        options: [
            { label: '红色', value: 'red' },
            { label: '绿色', value: 'green' },
            { label: '蓝色', value: 'blue' }
        ]
    },
    // 多选下拉框
    {
        key: 'multipleSelect',
        label: '多选下拉框',
        type: 'select' as const,
        multiple: true,
        options: [
            { label: '篮球', value: 'basketball' },
            { label: '足球', value: 'football' },
            { label: '排球', value: 'volleyball' },
            { label: '乒乓球', value: 'pingpong' }
        ]
    },
    // 折叠标签的多选下拉框
    {
        key: 'collapseSelect',
        label: '折叠标签多选',
        type: 'select' as const,
        multiple: true,
        collapseTags: true,
        options: [
            { label: '北京', value: 'bj' },
            { label: '上海', value: 'sh' },
            { label: '广州', value: 'gz' },
            { label: '深圳', value: 'sz' },
            { label: '杭州', value: 'hz' },
            { label: '南京', value: 'nj' }
        ]
    },
    // 远程搜索下拉框
    {
        key: 'remoteSelect',
        label: '远程搜索下拉框',
        type: 'select' as const,
        filterable: true,
        remote: true,
        remoteMethod: handleRemoteSearch,
        placeholder: '输入关键词搜索...'
    }
];

const handleSelectQuery = (values: Record<string, any>) => {
    console.log('下拉框查询条件:', values);
};

// 4. 高级选项配置
const advancedFields = [
    {
        key: 'productName',
        label: '产品名称',
        type: 'input' as const
    },
    {
        key: 'productType',
        label: '产品类型',
        type: 'select' as const,
        options: [
            { label: '数码产品', value: 1 },
            { label: '服装鞋帽', value: 2 },
            { label: '食品饮料', value: 3 }
        ]
    },
    {
        key: 'priceMin',
        label: '最低价格',
        type: 'number' as const,
        min: 0,
        advanced: true
    },
    {
        key: 'priceMax',
        label: '最高价格',
        type: 'number' as const,
        min: 0,
        advanced: true
    },
    {
        key: 'hasStock',
        label: '有库存',
        type: 'checkbox' as const,
        checkboxLabel: '仅显示有库存产品',
        advanced: true
    },
    {
        key: 'isPromotion',
        label: '促销商品',
        type: 'switch' as const,
        activeText: '是',
        inactiveText: '否',
        advanced: true
    }
];

const handleAdvancedQuery = (values: Record<string, any>) => {
    console.log('高级查询条件:', values);
};

// 5. 默认值和加载状态
const defaultValueFields = [
    {
        key: 'keyword',
        label: '关键词',
        type: 'input' as const
    },
    {
        key: 'orderStatus',
        label: '订单状态',
        type: 'select' as const,
        options: [
            { label: '全部', value: '' },
            { label: '待付款', value: 1 },
            { label: '已付款', value: 2 },
            { label: '已发货', value: 3 },
            { label: '已完成', value: 4 },
            { label: '已取消', value: 5 }
        ]
    },
    {
        key: 'orderTime',
        label: '订单时间',
        type: 'dateRange' as const
    },
    {
        key: 'orderSource',
        label: '订单来源',
        type: 'select' as const,
        options: [
            { label: '全部', value: '' },
            { label: 'PC端', value: 'pc' },
            { label: '移动端', value: 'mobile' },
            { label: '小程序', value: 'mini' }
        ]
    }
];
// 默认筛选值
const defaultFilters = reactive({
    orderStatus: '',
    orderSource: 'mobile',
    orderTime: []
});

const loading = ref(false);

const toggleLoading = () => {
    loading.value = !loading.value;
};

const handleDefaultQuery = (values: Record<string, any>) => {
    console.log('带默认值查询条件:', values);
    // 模拟加载
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 1500);
};

const handleDefaultReset = (values: Record<string, any>) => {
    console.log('重置后的条件:', values);
};

// 6. 事件监听
const eventFields = [
    {
        key: 'title',
        label: '标题',
        type: 'input' as const
    },
    {
        key: 'category',
        label: '分类',
        type: 'select' as const,
        options: [
            { label: '全部', value: '' },
            { label: '新闻', value: 'news' },
            { label: '公告', value: 'notice' },
            { label: '活动', value: 'activity' }
        ]
    },
    {
        key: 'publishTime',
        label: '发布时间',
        type: 'dateRange' as const
    }
];

const eventLogs = ref<string[]>([]);

// 记录事件日志
const addEventLog = (log: string) => {
    eventLogs.value.unshift(`[${new Date().toLocaleTimeString()}] ${log}`);
    // 只保留最近10条日志
    if (eventLogs.value.length > 10) {
        eventLogs.value.pop();
    }
};

const handleEventQuery = (values: Record<string, any>) => {
    addEventLog(`触发查询事件: ${JSON.stringify(values)}`);
};

const handleEventReset = (values: Record<string, any>) => {
    addEventLog(`触发重置事件: ${JSON.stringify(values)}`);
};

const handleFieldChange = (key: string, value: any) => {
    addEventLog(`字段${key}变化: ${JSON.stringify(value)}`);
};
</script>

<style lang="scss" scoped>
.filter-usage-demo {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

h2 {
    text-align: center;
    margin: 20px 0 30px;
    color: #333;
}

.demo-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #fff;
}

h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #444;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.event-log {
    margin-top: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;

    h4 {
        margin: 0 0 10px;
        font-size: 14px;
        color: #666;
    }

    ul {
        margin: 0;
        padding: 0 0 0 20px;
        font-size: 13px;

        li {
            margin-bottom: 5px;
            color: #555;

            &.latest {
                color: #1890ff;
                font-weight: 500;
            }
        }
    }
}
</style>
